export default {
  namespaced: true,
  state: {
    isShowToast: false, // 用来表示提示框是否展示
    msg: "", // 提示文本 ‘登录成功’
    type: "", // 提示类型 ‘success’ ‘wraning’ ‘danger’
  },
  mutations: {
    // 修改isShowLoginModal的值
    changeIsShowToast(state, payload) {
      state.isShowToast = payload.isShowToast;
      // state.msg = payload.msg;
      // state.type = payload.type;
      // 判断是否需要展示提示框，如果不需要展示提示框，那么就直接不提示相应的信息
      if (payload.isShowToast) {
        state.msg = payload.msg;
        state.type = payload.type;
      }
    },
  },
  actions: {
    asyncIsShowToast(context, payload) {
      // 先展示，就是调用原先写的上面这个方法 changeIsShowToast
      context.commit("changeIsShowToast", {
        isShowToast: true,
        msg: payload.msg,
        type: payload.type,
      });
      // Toast组件⾃动关闭的处理
      // 在这里做异步操作，设置定时器，1.5后改变展示提示框的状态，隐藏提示框
      setTimeout(() => {
        context.commit("changeIsShowToast", {
          isShowToast: false,
        });
      }, 2000);
    },
  },
  getters: {},
};

// 封装的思路：
// 调用者需要什么功能
// 再去写封装的内部逻辑
// 让调用尽可能简单。

// 封装Toast组件总结：
// 样式结构
// 显示隐藏变量存在vuex中
// 过渡效果（进场离场）
// msg和type属性处理
// 定时器，关闭Toast组件
// 抽取定时器到actions中
